<template>
	<!-- tab筛选切换 -->
	<u-tabs
		:list="tabLlist"
		:is-scroll="false"
		v-model="currentTab"
		@change="tabChange"
		active-color="#00C582"
		:active-item-style="{ color: '#333', fontWeight: 'normal' }"
	></u-tabs>

	<view class="auditStore-container">
		<img class="emptyImg" v-if="false" src="@/static/noData/noAuditingData.png" />
		
		<z-paging ref="paging" :fixed="false" v-model="auditStoreList" @query="queryList">
			<template #loadingMoreNoMore>
				<div style="text-align: center; color: #999; padding-bottom: 24rpx">没有更多了</div>
			</template>

			<template #empty></template>

			<view @click="toAuditing(item)" v-for="(item, index) in 13" :key="index" class="card">
				<view class="card-detail">
					<view class="detail-bigLine">
						<view class="leftPic">
							<image src="" class="storePic" />
						</view>
						<view class="centerName">
							<view class="name">{{ '商户名称' }}</view>
							<view class="money">商户编号：{{ '43241231231' }}</view>
						</view>
						<view class="rightStatus">
							<view v-if="true" class="status ac">审核中</view>
							<view v-if="false" class="status pass">审核通过</view>
							<view v-if="false" class="status fail">审核失败</view>
						</view>
					</view>
					<view class="line">
						<view class="label">详细地址</view>
						<view class="value">{{ '安徽省合肥市' ?? '-' }}</view>
					</view>
					<view class="line">
						<view class="label">商家电话</view>
						<view class="value">{{ '13999999999' ?? '-' }}</view>
					</view>
					<view class="line">
						<view class="label">申请人员</view>
						<view class="value">{{ '张三' ?? '-' }}</view>
					</view>
					<view class="line">
						<view class="label">申请时间</view>
						<view class="value">{{ '2024-12-12' ?? '-' }}</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 列表获取

// tab列表
const tabLlist = ref([
	{
		name: '审核中'
	},
	{
		name: '审核通过'
	},
	{
		name: '审核失败'
	}
]);

// tab切换
const currentTab = ref(0);
const tabChange = (index) => {
	console.log(index);
	console.log(currentTab.value);
};

// 获取商户审核数据
const auditStoreList = ref([]);
const paging = ref(null);
const queryList = (pageNo, pageSize) => {
	console.log(pageNo, pageSize);
	paging.value.complete([1, 2, 3, 4]);
};

// 点击审核中的商户跳转去审核商户页
const toAuditing = (item) => {
	console.log(tabLlist.value[currentTab.value]);
	if (tabLlist.value[currentTab.value].name != '审核中') return;
	
	uni.navigateTo({
		url: '/subPages/addStore/index'
	});
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.auditStore-container {
	position: relative;
	height: calc(100vh - 80rpx);
	background-color: #f9f9f9;
	padding: 24rpx;
	
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
	

	.card {
		border-radius: 24rpx;
		background-color: #fff;
		padding: 0 24rpx 24rpx;
		margin-bottom: 24rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.card-detail {
			padding-top: 24rpx;

			.detail-bigLine {
				display: flex;
				align-items: center;
				height: 124rpx;

				.leftPic {
					height: 100%;
					margin-right: 24rpx;

					.storePic {
						width: 124rpx;
						height: 124rpx;
						border-radius: 24rpx;
					}
				}

				.centerName {
					flex: 1;
					height: 100%;
					padding-top: 16rpx;

					.name {
						font-family: PingFang SC;
						font-size: 32rpx;
						font-weight: 500;
						line-height: 36rpx;
						color: #333;
						margin-bottom: 20rpx;
					}

					.money {
						font-family: PingFang SC;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 36rpx;
						color: #333;
					}
				}

				.rightStatus {
					height: 100%;
					padding-top: 16rpx;

					.status {
						font-family: PingFang SC;
						font-size: 20rpx;
						font-weight: 400;
						line-height: 32rpx;
						color: #999;
						padding: 0 12rpx;
						border-radius: 6rpx;
						margin-bottom: 16rpx;
						background-color: rgba(153, 153, 153, 0.12);

						&:last-child {
							margin-bottom: 0;
						}
					}
				}

				.auditing {
					color: #ff8b06 !important;
					background: rgba(255, 139, 6, 0.12) !important;
				}

				.pass {
					color: #00c582 !important;
					background: rgba(0, 197, 130, 0.12) !important;
				}

				.fail {
					color: #fe4033 !important;
					background: rgba(254, 64, 51, 0.12) !important;
				}
			}

			.line {
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;

				.label {
					font-family: PingFang SC;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: #999;
					width: 8em;
					white-space: nowrap;
					margin-right: 16rpx;
				}

				.value {
					font-family: PingFang SC;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: #333;
				}
			}
		}
	}

	.emptyImg {
		position: absolute;
		top: 280rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 480rpx;
		// height: 203px;
	}
}
</style>
